<template>
  <div>
    <h1>App..</h1>
    <hr />
    <!-- 
      组件间通信方式：插槽
      作用：同来通信标签数据

      默认插槽

      命名插槽/具名插槽

      作用域插槽
     -->
    <Child1>
      <!-- 子组件标签内所有内容都称为插槽 -->
      <!-- 使用默认插槽，给Child传递标签数据（没有取名称，就是默认插槽） -->
      <header>title...</header>
      <footer>footer...</footer>
    </Child1>

    <hr />

    <Child2>
      <!-- 需要命名插槽 -->

      <!-- 
        template相当于react中Fragment组件
          不会生成任何元素，充当容器的
       -->
      <template v-slot:header>
        <header>title...</header>
      </template>

      <template #footer>
        <footer>footer...</footer>
      </template>
    </Child2>

    <hr />

    <Child3>
      <!-- 
        什么时候会使用默认插槽，什么时候会使用具名插槽？
          如果标签数据只需要在子组件一个地方展示，使用默认插槽
          如果标签数据需要在子组件不同地方展示，
            优先使用默认插槽（最重要的内容），其他位置再加上具名插槽
       -->
      <!-- 具名插槽 -->
      <template v-slot:header>
        <header>title...</header>
      </template>

      <!-- 没有取名字，就是默认插槽 -->
      <div>content111...</div>
      <div>content222...</div>
      <div>content333...</div>

      <!-- 具名插槽 -->
      <template #footer>
        <footer>footer...</footer>
      </template>
    </Child3>

    <hr />

    <Child4>
      <!-- 
        具名插槽 
      
        ="{ num }" 
          声明接受子组件传递的数据
          数据是一个对象，通过对象解构得到内部具体的数据num
      -->
      <!-- <template #header="scoped">
        <header>title... {{ scoped.num }}</header>
      </template> -->

      <template #header="{ num }">
        <header>title... {{ num }}</header>
      </template>

      <!-- 没有取名字，就是默认插槽 -->
      <template v-slot="{ num }">
        <div>content111...{{ num }}</div>
      </template>
    </Child4>
  </div>
</template>

<script>
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
import Child3 from "./Child3.vue";
import Child4 from "./Child4.vue";

export default {
  name: "App",
  components: {
    Child1,
    Child2,
    Child3,
    Child4,
  },
};
</script>

<style></style>
